<!--test.vue-->
<template>
	<div style="width: 100%;height:100%" ref="echartsBox">
  	<v-chart ref="echarts" class="chart" :option="option" :key="key" />
	</div>
</template>

<script>
	import { config } from './data.js'
	console.log(config)

	export default {
		name: 'GaugePieChart',
		props: {
			pieOptions: {
				type: Object,
        default: () => {
					return config
				}
      }
		},
		watch: {
			pieOptions: {
				handler(val) {
					console.log('pieOptions', val)
					this.option = val
				},
				deep: true,
				immediate: true
			}
		},
    data(){
			return {
				option: {},
				key: 1
      }
    },
		mounted() {
			let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
			let element = this.$refs['echartsBox']
			this.observer = new MutationObserver((mutationList) => {
				for (let mutation of mutationList) {
					console.log(mutation)
				}
				console.log('自适应')
				// this.$refs['echarts'].resize()
				this.key+=1
			})
			this.observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
		},
		beforeDestroyed () {
			if (this.observer) {
				this.observer.disconnect()
				this.observer.takeRecords()
				this.observer = null
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
